<!-- 上传个人信息（头像和昵称） -->
<template>
	<view class="sysupload">
		<view class="sybox" :data-weui-theme="theme">
			<view class="box">
				<view class="active">头像</view>
				<view class="imgs">
					<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image class="avatar" :src="baseURLImgUPD+avatarUrl"></image>
					</button>
				</view>
				<image class="img" src="@/static/icons/right.png" mode=""></image>
			</view>
			<view class="row">
				<view class="text1">昵称：</view>
				<input id="nickname-input" type="nickname" v-model="nickname" class="weui-input" name="nickname"
					placeholder="请输入昵称" />
			</view>
			
			<view class="row">
				<view class="text1">手机号：</view>
				<input type="number" maxlength="11" v-model="phone" class="weui-input" placeholder="请输入手机号" />
			</view>
			
		</view>
		<button type="primary" style="margin-top: 40rpx;margin-bottom: 20rpx;" form-type="submit"
			@click="gotos()">提交</button>
	</view>
</template>

<script>
	const app = getApp();
	// 图片服务器
	import baseURLShowImgUP from "@/api/base.js";
	import {addMpUser,infoMpUser,editMpUser } from '@/api/pagesApi/index.js'
	export default {
		data() {
			return {
				phone:'',
				nickname: '',
				mpuserId:null,
				baseURLImgUPD: '',
				baseURLImg: "",

				productImg: '',
				//
				avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
				theme: wx.getSystemInfoSync().theme,
				
				type:null,
			}
		},
		onLoad(opt) {
			this.baseURLImgUPD = baseURLShowImgUP.baseURLShowImgUP;
			this.baseURLImg = baseURLShowImgUP.baseURLImgUP
			
			if(opt.type){
				this.type = opt.type
				infoMpUser({
					mpuserOpenid:wx.getStorageSync('wzOpenid')
				}).then(res=>{
					this.avatarUrl = res.data.data.mpuserAvatar
					this.nickname = res.data.data.mpuserNickname
					this.phone = res.data.data.mpuserPhone
					this.mpuserId = res.data.data.mpuserId
				})
			}
			// this.avatarUrl = wx.getStorageSync('logo')
			// this.nickname = wx.getStorageSync('nickName')
			wx.onThemeChange((result) => {
				// this.setData({
				// 	theme: result.theme
				// })
				this.theme = result.theme
			})
		},
		methods: {
			//提交按钮
			gotos() {
				let that = this
				uni.createSelectorQuery().in(this) // 注意这里要加上 in(this)
					.select("#nickname-input")
					.fields({
						properties: ["value"],
					})
					.exec((res) => {
						console.log(res)
						that.nickname = res?. [0]?.value
						setTimeout(() => {
							//判断nickname的长度（是否有值）
							if (that.nickname.trim().length == 0) {
								uni.showToast({
									title: '请输入昵称！',
									icon: 'none'
								});
								return
							}
							let params = {
								mpuserNickname: that.nickname,//昵称
								mpuserAvatar: that.avatarUrl,//头像
								mpuserPhone: that.phone,//手机号
								mpuserOpenid:wx.getStorageSync('wzOpenid')
							};
							console.log(params)
							//调用接口吧头像和昵称上传
							if(that.type){
								params.mpuserId = that.mpuserId
								editMpUser(params).then(resq => {
									console.log(resq)
									if(resq.data.code == 200){
										// wx.setStorageSync('wzUid',resq.data.data.mpuserId)
										uni.showToast({
											icon:'none',
											title:resq.data.msg
										})
										setTimeout(function(){
											uni.reLaunch({
												url:'../../../pages/my/index'
											})
										},1500)
									}else{
										uni.showToast({
											icon:'none',
											title:resq.data.msg
										})
									}
								});
							}else{
								addMpUser(params).then(res => {
									console.log(res)
									if(res.data.code == 200){
										// wx.setStorageSync('wzUid',res.data.data.mpuserId)
										uni.showToast({
											icon:'none',
											title:res.data.msg
										})
										setTimeout(function(){
											uni.reLaunch({
												url:'../../../pages/my/index'
											})
										},1500)
									}else{
										uni.showToast({
											icon:'none',
											title:res.data.msg
										})
										
									}
								});
							}
							
						}, 100)
					})
			},

			//获取头像并上传
			onChooseAvatar(e) {
				console.log(e)
				//获取到本地头像路径
				var url = e.detail.avatarUrl
				const that = this
				wx.uploadFile({
					url: that.baseURLImg, //上传接口
					filePath: url,
					name: "file",
					formData: {
						name: "file",
					},
					header: {
						"content-type": "multipart/form-data",
						// "token": that.$store.state.token
					},
					success: (res) => {
						// console.log(res);
						console.log(JSON.parse(res.data));
						const item = JSON.parse(res.data).fileName;
						this.avatarUrl = item;
						// this.productImg.push(item);
						// console.log(this.avatarUrl);
					},
					fail: (res) => {
						console.log(res);
						uni.showToast({
							icon: 'none',
							title: '上传失败'
						})
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.sysupload {
		width: calc(100% - 40rpx);
		padding: 0 20rpx;
		height: calc(100vh - 20rpx);
		padding-top: 20rpx;
		background-color: #F6F6F6;
		.sybox{
			width: calc(100% - 40rpx);
			padding: 0 20rpx;
			min-height: 150rpx;
			background-color: #fff;
			border-radius: 16rpx;
			.box{
				width: 100%;
				height: 140rpx;
				display: flex;
				align-items: center;
				.active{
					flex: 1;
				}
				.imgs{
					margin-right: 20rpx;
					width: 112rpx;
					.avatar-wrapper {
						padding: 0;
						width: 112rpx !important;
						border-radius: 16rpx;
						background-color: #fff;
						.avatar {
							display: block;
							width: 112rpx;
							height: 112rpx;
						}
					}
				}
				.img{
					width: 24rpx;
					height: 24rpx;
				}
				
			}
		}
	}
	

	/* index.wxss  参考 */


	.container {
		display: flex;
	}

	.row {
		border-top: 1rpx solid #ccc;
		display: flex;
		align-items: center;
		height: 140rpx;

		input {
			text-align: right;
			height: 100rpx;
		}
	}

	.text1 {
		flex: 2;
	}

	.weui-input {
		flex: 5;
	}
</style>
